<template>
    <div class="history">
        <div>
            <div class="icon">
                <i class="el-icon-alarm-clock"></i>
                历史记录
                <div class="button">
                    <el-button type="primary" @click="delete_all()" plain v-if="history.length != 0">清空历史</el-button>
                </div>
            </div>
            <el-empty description="暂无历史记录" v-if="history.length == 0"></el-empty>
            <div class="timeline">
                <el-timeline>
                    <el-timeline-item
                    v-for="(video, index) in history"
                    :key="index"> 
                    <div>
                        <div class="time">
                            <div>{{ video.createTime.substr(0,10) }}</div>
                            <div style="float: left;">{{ video.createTime.substr(11,18) }}</div>
                        </div>
                        <div class="main">
                            <div style="display: inline-block;"  @click="router_video(video.id)">
                                <el-image style="width: 200px; height: 120px;border-radius: 10px;cursor: pointer;" :src="video.cover" referrerPolicy='no-referrer'
                                fit="fill"></el-image>
                            </div>
                            <div class="text">
                                <div class="name">
                                    <span class="span" @click="router_video(video.id)">{{ video.title }}</span>
                                </div>
                                <div class="delete"><el-button type="text" @click="delete_one(video.id)"><i class="el-icon-delete" style="font-size: 140%;"></i></el-button></div>
                                <div style="font-size: 80%;color: #606266;height: 30px;">
                                    <el-avatar style="width: 30px; height: 30px;" fit="fill">
                                        <img :src="video.publisherAvatarUrl" referrerPolicy='no-referrer'>
                                    </el-avatar>
                                    <div class="text1">
                                        <span>{{ video.publisherName }} </span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span>{{ video.classification }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    data() {
      return {
        history: [],//历史记录
        history_num:3,//历史记录页数
        disabled:false,//是否加载全部历史记录
      };
    },
    created(){
        var id = sessionStorage.getItem('id')
        var _this = this
        PersonalCenterApi.SubmitByUidGetHistory(1,4,id).then(res => {
            if(res.data.code == 200){
                _this.history = _this.history.concat(res.data.data.records)
            }
        })
    },
    methods:{
        //跳转到视频页面
        router_video(id){
            var {href} = this.$router.resolve({
                name:'video',
                query:{
                    id:id
                }
            })
            window.open(href,"_blank");
        },
        //删除一条历史记录
        delete_one(vid){
            this.$confirm('您确定要删除这条记录吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    var id = sessionStorage.getItem('id')
                    var history = {
                        uid:id,
                        vid:vid
                    }
                    PersonalCenterApi.SubmitDeleteHistory(history).then(res => {
                        this.$router.go(0)
                })
                }).catch(() =>{})
        },
        //清空历史记录
        delete_all(){
            this.$confirm('您确定要清空历史记录吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    var id = sessionStorage.getItem('id')
                    var history = {
                        uid:id,
                    }
                    PersonalCenterApi.SubmitDeleteHistory(history).then(res => {
                        if(res.data.code==200){
                            this.$router.go(0)
                        }
                        
                })
                }).catch(() =>{})
        },
        //滚轮下拉出现历史记录
        load(){
            var id = sessionStorage.getItem('id')
            var _this = this
            PersonalCenterApi.SubmitByUidGetHistory(_this.history_num,2,id).then(res => {
                if(res.data.code == 200){
                    _this.history = _this.history.concat(res.data.data.records)
                }
                _this.history_num++
            }) 
        }
    },

};
</script>

<style scoped>
.history{
    float: left;
    padding: 15px;
    text-align: left;
    overflow:auto;
}
.icon{
    font-size: 200%;
    text-align: left;
}
.main{
    position:relative;
    top: -50px;
    height: 120px;
    width: 750px;
    margin-left: 100px;
}
.timeline{
    margin-top: 60px;
    
}

.time{
    float: left;
    font-size: 80%;
    color: #909399;
}
div /deep/ .el-timeline{
    padding-inline-start: 0px;
}
.name{
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 40px;
    width: 500px;
}
.text{
    display: inline-block;
    vertical-align:top;
    height: 120px;
    margin-left: 20px;
    padding: 5px;
}
.text1{
    display: inline-block;
    height: 16px;
    position:absolute;
    margin-left: 10px;
    margin-top: 7px;
}
.button{
    display: inline-block;
    margin-left: 550px;
}
.delete{
    text-align: right;
}
.span:hover{
    color: #409EFF;
    cursor: pointer;
}
</style>